<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>更新供应商</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-col :span="24">
          <el-form ref="form" :model="data" :inline="true" :rules="formRules">
            <el-input v-model="data.id" class="hidden" />
            <el-row :gutter="10">
              <el-col :xl="6" :lg="6" :md="8" :sm="10">
                <el-form-item prop="coding">
                  <div>编号</div>
                  <el-input v-model="data.coding" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="6" :md="8" :sm="10">
                <el-form-item prop="name">
                  <div>名称</div>
                  <el-input v-model="data.name" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="6" :md="8" :sm="10">
                <el-form-item prop="phone">
                  <div>电话</div>
                  <el-input v-model="data.phone" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="6" :md="8" :sm="10">
                <el-form-item prop="email">
                  <div>电子邮箱</div>
                  <el-input v-model="data.email" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="9" :lg="9" :md="8" :sm="10">
                <el-form-item prop="address1">
                  <div>地址第1行</div>
                  <el-input v-model="data.address1" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="9" :lg="9" :md="8" :sm="10">
                <el-form-item prop="address2">
                  <div>地址第2行</div>
                  <el-input v-model="data.address2" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="6" :md="8" :sm="10">
                <el-form-item prop="zip">
                  <div>邮政编码</div>
                  <el-input v-model="data.zip" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="3" :md="4" :sm="5">
                <el-form-item prop="city">
                  <div>城市</div>
                  <el-input v-model="data.city" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="3" :md="4" :sm="5">
                <el-form-item prop="country">
                  <div>国家</div>
                  <el-input v-model="data.country" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="5" :lg="5" :md="8" :sm="10">
                <el-form-item prop="weburl">
                  <div>网站</div>
                  <el-input v-model="data.weburl" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="3" :lg="3" :md="8" :sm="10">
                <el-form-item prop="sort">
                  <div>排序</div>
                  <el-input v-model="data.sort" size="mini" />
                </el-form-item>
              </el-col>
              <el-col :xl="8" :lg="8" :md="10" :sm="10">
                <el-form-item>
                  <div>选项</div>
                  <el-checkbox v-model="data.is_provider" label="是供应商" :true-label="1" :false-label="0" size="mini" />
                  <el-checkbox v-model="data.is_manufacturer" label="是制造商" :true-label="1" :false-label="0" size="mini" />
                  <el-checkbox v-model="data.is_epiboly" label="是外包商" :true-label="1" :false-label="0" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-tabs>
            <el-tab-pane label="联系信息">
              <el-table :data="list">
                <el-table-column prop="name" label="名称" min-width="12%" />
                <el-table-column prop="role" label="角色" min-width="16%" />
                <el-table-column prop="email" label="电子邮箱" min-width="16%" />
                <el-table-column prop="phone1" label="电话1" min-width="16%" />
                <el-table-column prop="phone1" label="电话2" min-width="16%" />
                <el-table-column prop="weight" label="重要性" min-width="12%" :formatter="weightFormat" />
                <el-table-column label="操作" min-width="8%">
                  <template scope="scope">
                    <el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
                <div slot="append">
                  <el-form ref="append_form" :model="user" inline class="hf_form append_other_admin" :rules="appendRules">
                    <el-row :gutter="10">
                      <el-col :span="3">
                        <el-form-item prop="name">
                          <el-input v-model="user.name" size="mini" placeholder />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="role">
                          <el-input v-model="user.role" size="mini" placeholder />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="email">
                          <el-input v-model="user.email" size="mini" placeholder />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="phone1">
                          <el-input v-model="user.phone1" size="mini" placeholder />
                        </el-form-item>
                      </el-col>
                      <el-col :span="4">
                        <el-form-item prop="phone2">
                          <el-input v-model="user.phone2" size="mini" placeholder />
                        </el-form-item>
                      </el-col>
                      <el-col :span="3">
                        <el-form-item prop="weight">
                          <el-select v-model="user.weight" size="mini">
                            <el-option v-for="(item, index) in weight" :key="index" :value="index" :label="item" />
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="2">
                        <el-form-item>
                          <el-button icon="el-icon-upload2" size="mini" @click="append" />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="描述">
              <el-row :gutter="10">
                <el-col :span="4">
                  <div>
                    <span>创建时间日期</span>
                    <el-input v-model="data.create_time" placeholder="创建时间日期" :disabled="true" class="mtb10" size="mini" />
                  </div>
                  <div>
                    <span>创建人</span>
                    <el-input v-model="data.cr_admin.name" placeholder="创建人" :disabled="true" class="mtb10" size="mini" />
                  </div>
                  <div v-if="data.update_time">
                    <div>
                      <span>最近更新</span>
                      <el-input v-model="data.update_time" placeholder="最近更新" :disabled="true" class="mtb10" size="mini" />
                    </div>
                    <div>
                      <span>更新者</span>
                      <el-input v-model="data.up_admin.name" placeholder="更新者" :disabled="true" class="mtb10" size="mini" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="20">
                  <Tinymce id="content" v-model="data.content" />
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="参考编号">
              <el-table :data="part">
                <el-table-column prop="parts.name" label="备件" />
                <el-table-column prop="parts.coding" label="参考编号" />
                <el-table-column prop="preference" label="偏好的" :formatter="preferenceFormat" />
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from '@/api/system/provider'
import { weight } from '@/utils/options'
import Tinymce from '@/components/Tinymce/index'
export default {
  inject: ['backUrl', 'delOne', 'update', 'appendOtherAdmin', 'delOtherAdmin', 'getWeightFormat', 'getPreferenceFormat', 'goUrl'],
  components: {
    Tinymce
  },
  data() {
    return {
      data: {
        'cr_admin': {
          'name': ''
        }
      },
      list: [
        {
          name: '',
          role: '',
          email: '',
          phone1: '',
          phone2: ''

        }
      ],
      user: {
        'name': '',
        'role': '',
        'email': '',
        'phone': '',
        'phone2': ''
      },
      part: [],
      weight,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入供应商名称',
            trigger: 'blur'
          }
        ],
        phone: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入电子邮箱',
            trigger: 'blur'
          }
        ],
        country: [
          {
            required: true,
            message: '请输入国家',
            trigger: 'blur'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      },
      appendRules: {
        name: [
          {
            required: true,
            message: '请输入联系人名称',
            trigger: 'blur'
          }
        ],
        role: [
          {
            required: true,
            message: '请输入角色',
            trigger: 'blur'
          }
        ],
        email: [
          {
            required: true,
            message: '请输入电子邮箱',
            trigger: 'blur'
          }
        ],
        phone1: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          }
        ],
        phone2: [
          {
            required: true,
            message: '请输入备用电话',
            trigger: 'blur'
          }
        ],
        weight: [
          {
            required: true,
            message: '请选择重要性',
            trigger: 'change'
          }
        ]
      }
    }
  },
  created() {
    const id = this.$route.params.id
    API.getOne(id).then(response => {
      if (response.data.error_code === 92404) {
        this.$alert('您请求的供应商不存在', '错误', {
          confirmButtonText: '确定',
          callback: () => {
            this.backUrl()
          }
        })
      }
      this.data = response.data
      this.list = response.data.other_user
      this.part = response.data.part
    })
  },
  methods: {
    confirmDel() {
      const id = this.data.id
      this.delOne(API, id, true)
    },
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.update(API, thisData, thisForm)
    },
    append() {
      const thisForm = this.$refs.append_form
      const provider_data = {
        'name': this.user.name,
        'role': this.user.role,
        'email': this.user.email,
        'phone1': this.user.phone1,
        'phone2': this.user.phone2,
        'weight': this.user.weight,
        'id': this.$route.params.id
      }
      const errorCode = 43004
      const errorMessage = '该人员已存在'
      this.appendOtherAdmin(API, thisForm, provider_data, errorCode, errorMessage)
    },
    remove(id) {
      const provider_data = {
        'id': id
      }
      this.delOtherAdmin(API, id, provider_data)
    },
    weightFormat(row) {
      return this.getWeightFormat(row)
    },
    preferenceFormat(row) {
      return this.getPreferenceFormat(row)
    },
    goBack() {
      this.goUrl('/system/provider')
    }
  }
}
</script>
